<template>
  <div class="ssc-table">
    <div class="ssc-table-header">
      <span class="ssc-table-header-title">大咖管理</span>
      <a-button type="primary" @click="showModal()">
        <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
        新建
      </a-button>
    </div>
    <a-table :defaultExpandAllRows="true" :dataSource="list" :columns="columns" :pagination="pagination" :loading="loading" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <div>
            <a @click="showModal(record)">编辑</a>
            <a-divider type="vertical" />
            <a class="color-error" @click="deleteComment(record)">删除</a>
          </div>
        </template>
      </template>
    </a-table>
    <UpdateBigShot ref="UpdateBigShotRef" @reload="getContentList" />
  </div>
</template>

<script setup lang="ts">
  import { message, Modal, TablePaginationConfig, TableProps } from 'ant-design-vue'
  import dayjs from 'dayjs'
  import { computed, ref } from 'vue'

  import { requestBigShotList, requestDeleteBigShotById } from '/@/api/exchange/bigShot'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  import UpdateBigShot from './UpdateBigShot.vue'

  const UpdateBigShotRef = ref<InstanceType<typeof UpdateBigShot>>()

  const columns = [
    {
      title: '发布时间',
      dataIndex: 'createdTime',
      customRender: ({ text }: { text: string }) => {
        return dayjs(text).format('YYYY-MM-DD HH:mm:ss')
      },
    },
    {
      title: '大咖姓名',
      dataIndex: 'name',
    },
    {
      title: '大咖说',
      dataIndex: 'says',
    },
    {
      title: '操作',
      dataIndex: 'action',
    },
  ]
  const loading = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))
  const searchParams = ref<InformationTypes.SearchData>()

  const list = ref<InformationTypes.IResponse[]>([])

  // 分页查询
  const handleTableChange: TableProps['onChange'] = (tabPage: TablePaginationConfig) => {
    pagination.value.current = tabPage.current || 1
    pagination.value.pageSize = tabPage.pageSize || 10
    getContentList()
  }

  // 获取页面list
  const getContentList = async () => {
    loading.value = true
    const { responseData } = await requestBigShotList({
      ...page.value,
      ...searchParams.value,
    })
    list.value = responseData.list || []
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }

  // 查询
  const search = (params: InformationTypes.SearchData) => {
    searchParams.value = params
    pagination.value.current = 1
    getContentList()
  }

  // 新建资讯
  const showModal = (info?: InformationTypes.IResponse) => UpdateBigShotRef.value?.showModal(info)
  // 删除评论
  const deleteComment = (record: InformationTypes.IResponse) => {
    Modal.confirm({
      title: '删除',
      content: '是否删除该大咖?',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        // 删除
        const { responseCode } = await requestDeleteBigShotById(record.id)
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('删除成功')
          getContentList()
        }
      },
    })
  }

  defineExpose({
    search,
  })
</script>
<style lang="less" scoped></style>
